<template>
	<div id="map" class="map_inner" />
</template>

<script>
	import china from '../../static/china.js'

	export default {
		name: 'mapEcharts',
		data: () => ({

		}),
		methods: {
			initEchart() {
				var myChartMap = this.$echarts.init(document.getElementById('map'));
				// 地图上数据,经度和纬度，最后一个是销量，或者说你要统计的当地数据个数，这些都是后台返给你的你想在哪显示就在哪显示
				var myData = [{
						name: '温泉新都孔雀城',
						value: [116.358241,39.146048]
					},
					{
						name: '琼海海城时代广场',
						value: [110.495147,19.245873, 120]
					},
					{
						name: '碧桂园·润杨溪谷',
						value: [114.539833,22.846272, 142]
					},
					{
						name: '空港新都-空港尊',
						value: [116.515868,39.356898, 123]
					},
					{
						name: '佳兆业山海湾',
						value: [114.767569,22.789309, 566]
					},
					{
						name: '古滇名城',
						value: [102.743369,24.773143, 123]
					},
					{
						name: '惠州富力湾',
						value: [114.837402,22.794235, 123]
					},
					{
						name: '昆明文旅城',
						value: [102.658392,25.029897, 123]
					},
					{
						name: '鼎龙湾国际海洋王国度假区',
						value: [110.906837,21.398146, 123]
					},
				]

				//现在有好几种坐标系，谷歌、百度、国家地理测绘局、高德、搜狗等坐标系，
				//每种坐标系的经纬度都稍稍有偏差，这可能决定你定位的位置的精确性，只要保证前后端坐标系统一就能保证定位的准确性

				myChartMap.setOption({

					// 新建一个地理坐标系 geo ，
					geo: {
						map: 'china', //地图类型为中国地图,要是世界那就是world,要是省市区：例如beijing、shanghai
						itemStyle: { // 定义样式
							normal: { // 普通状态下的样式
								areaColor: '#283e6d',
								borderColor: '#01d4f9',
							},
							emphasis: { // 高亮状态下的样式
								areaColor: '#e9fbf1'
							},
						},
						left: 50,
						top: 10,
						bottom: 10,
						right: 50,
						aspectScale: 1.75

					},
					// hover显示目标数据
					tooltip: {
						trigger: 'item',
						// tooltip的trigger的值可以有'item'、'axis'。
						//'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
						//'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
						textStyle: {
							align: 'left'
						},
					},
					// 图表背景色
					//					backgroundColor: '#fff',
					// 标志颜色
					color: 'red',
					// 新建散点图series
					series: [{
						name: '', //series名称
						type: 'scatter', //为散点类型
						
						coordinateSystem: 'geo', // series坐标系类型
						data: myData,
						symbol: 'pin',
						symbolSize: [20, 20],
						roam: true,

					}],
					// 添加视觉映射组件
					//					visualMap: {
					//						type: 'continuous', // 连续型
					//						min: 0, // 值域最小值，必须参数
					//						max: 600, // 值域最大值，必须参数
					//						calculable: true, // 是否启用值域漫游
					//						inRange: {
					//							color: ['red', 'yellow']
					//							// 指定数值从低到高时的颜色变化
					//						},
					//						textStyle: {
					//							color: '#fff' // 值域控件的文本颜色
					//						}
					//					}
				})

			}

		},
		mounted() {
			this.initEchart();
		},
	}
</script>
<style scoped>
	#map {
		width: 100%;
		height: 100%;
	}
</style>